<template>
  <BasicModal
    width="800px"
    :title="t('component.upload.preview')"
    class="upload-preview-modal"
    v-bind="$attrs"
    @register="register"
    :showOkBtn="false"
  >
    <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import FileList from './FileList.vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { previewProps } from '../props';
  import { FileBasicColumn, PreviewFileItem } from '../types/typing';
  import { downloadByUrl } from '@/utils/file/download';
  import { createPreviewColumns, createPreviewActionColumn } from './data';
  import { useI18n } from '@/hooks/web/useI18n';
  import { isArray } from '@/utils/is';
  import { BasicColumn } from '@/components/Table';

  const props = defineProps(previewProps);

  const emit = defineEmits(['list-change', 'register', 'delete']);

  let columns : BasicColumn[] | FileBasicColumn[] = createPreviewColumns();
  let actionColumn :any;

  const [register] = useModalInner();
  const { t } = useI18n();

  const fileListRef = ref<PreviewFileItem[] | Array<any>>([]);
    watch(
    () => props.previewColumns,
    () => {
      if (props.previewColumns.length) {
        columns = props.previewColumns;
        actionColumn = null
      }else{
        columns=createPreviewColumns();
        actionColumn = createPreviewActionColumn({ handleRemove, handleDownload })
      };
      
    },
    { immediate: true },
  );

  watch(
    () => props.value,
    (value) => {
      if (!isArray(value)) value = [];
      if(props.beforePreviewData){
        value = props.beforePreviewData(value)  as any
        fileListRef.value = value
        return 
      }
      fileListRef.value = value
        .filter((item) => !!item)
        .map((item) => {
          if(typeof item!="string"){
            console.error("return value should be string")
            return
          }
          return {
            url: item,
            type: item.split('.').pop() || '',
            name: item.split('/').pop() || '',
          };
        });
    },
    { immediate: true },
  );

  // 删除
  function handleRemove(record: PreviewFileItem) {
    const index = fileListRef.value.findIndex((item) => item.url === record.url);
    if (index !== -1) {
      const removed = fileListRef.value.splice(index, 1);
      emit('delete', removed[0].url);
      emit(
        'list-change',
        fileListRef.value.map((item) => item.url),
      );
    }
  }

  // 下载
  function handleDownload(record: PreviewFileItem) {
    const { url = '' } = record;
    downloadByUrl({ url });
  }
</script>
<style lang="less">
  .upload-preview-modal {
    .ant-upload-list {
      display: none;
    }

    .ant-table-wrapper .ant-spin-nested-loading {
      padding: 0;
    }
  }
</style>
